<template>
  <div class="login">
    <GlobalHeader />
    <el-row class="content">
      <el-col :span="12" class="left">
        <img src="../../assets/login/login_left.png" />
      </el-col>
      <el-col :span="12" class="right">
        <div class="form-wrap">
          <div class="title">系统登录</div>
          <el-form :model="form" ref="loginFormRef" :rules="loginRules">
            <el-form-item class="form-item" prop="name">
              <el-input
                class="input"
                v-model="form.name"
                placeholder="登录账号"
                :prefix-icon="User"
              />
            </el-form-item>
            <el-form-item class="form-item" prop="password">
              <el-input
                class="input"
                v-model="form.password"
                placeholder="登录密码"
                type="password"
                :show-password="true"
                :prefix-icon="Lock"
              />
            </el-form-item>
            <el-form-item class="form-item" prop="plat">
              <!-- <el-input
                class="input"
                v-model="form.plat"
                placeholder="用户系统"
                :prefix-icon="Monitor"
              /> -->
              <el-select
                v-model="form.plat"
                placeholder="用户系统"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <!-- <div class="line">--------- 其他登录方式 ---------</div>
          <div class="other">
            <div class="other-item">
              <i class="iconfont icon-weixin"></i>微信
            </div>
            <div class="other-item"><i class="iconfont icon-QQ"></i>QQ</div>
            <div class="other-item">
              <i class="iconfont icon-mobile"></i>手机
            </div>
          </div> -->
          <el-button class="login-btn" type="primary" @click="toLogin">登 录</el-button>
        </div>
      </el-col>
    </el-row>
    <GlobalFooter />
  </div>
</template>

<script setup>
import { User, Lock, Monitor } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '../../store/modules/user'

const $router = useRouter()
const userStore = useUserStore()

const options = reactive([
  {
    value: '1',
    label: '智慧水务后台管理系统'
  },
  {
    value: '2',
    label: '数据采集管理系统（DCM）'
  },
  {
    value: '3',
    label: '成本及能耗管理系统（CEM）'
  },
  {
    value: '4',
    label: '智慧水务调度中心'
  },
])

const form = reactive({
  name: '',
  password: '',
  plat: '',
})
let loginFormRef = ref(null)
let loginRules = reactive({
  name: [
    {
      required: true,
      message: '登录账号不能为空',
      trigger: 'change',
    },
  ],
  password: [
    {
      required: true,
      message: '登录密码不能为空',
      trigger: 'change',
    },
  ],
  plat: [
    {
      required: true,
      message: '请选择用户系统',
      trigger: 'change',
    },
  ],
})

const toLogin = () => {
  // if(loginFormRef.value) {
  //     loginFormRef.value.validate(valid => {
  //         if(valid) {
  userStore.login(form) // 登录方法
  // switch (form.plat) {
  //   case '1':
  //     window.location.replace('http://8.149.143.233:8880/home')
  //     break
  //   case '2':
  //     window.location.replace('http://8.149.143.233:8881/home')
  //     break
  //   case '3':
  //     window.location.replace('http://8.149.143.233:8882/home')
  //     break
  //   case '4':
  //     $router.push('/home')
  //     break
  // }
  $router.push('/home')
  //         }
  //     })
  // }

}
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  height: 100%;
  padding: 60px 0;
  min-height: 690px;
  background-color: #edf3ff;
  background-image: url("../../assets/login/bg.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 100% 100%;
  overflow: hidden;

  .content {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    .left {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      img {
        width: 70%;
        height: 85%;
        margin-left: 10%;
      }
    }
    .right {
      display: flex;
      align-items: center;
      justify-content: center;
      .form-wrap {
        margin-left: 30%;
        width: 400px;
        height: 440px;
        border-radius: 5px;
        background-image: url("../../assets/login/form.png");
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
          text-align: center;
          font-size: 24px;
          font-weight: bold;
          color: #fff;
          padding-top: 39px;
        }
        .el-form {
          margin-top: 36px;
          .form-item {
            margin-bottom: 23px;

            .input {
              width: 248px;
              :deep(.el-input__wrapper) {
                border-radius: 16px;
              }
            }
          }
        }
        .line {
          font-size: 14px;
          margin-top: 10px;
        }
        .other {
          display: flex;
          .other-item {
            margin: 12px 20px 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
            cursor: pointer;
            .iconfont {
              font-size: 24px;
            }
          }
        }
        .login-btn {
          width: 247px;
          height: 40px;
          margin-top: 30px;
          padding: 10px 15px 11px;
          background-image: linear-gradient(#87c2ff, #9bcdff);
          font-size: 17px;
          color: #fff;
          border-radius: 20px;
          border: none;
        }
      }
    }
  }
}
</style>
